<template>
  <mavonEditor
    class="mavon"
    :value="content"
    :toolbars="toolbars"
    :toolbarsFlag="toolbarsFlag"
    :subfield="subfield"
    :boxShadow="boxShadow"
    :editable="editable"
    :defaultOpen="defaultOpen"
    :ishljs="true"
    :navigation="navigation"
    @save="save"
  ></mavonEditor>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
  name: "markdown",
  components: {
    mavonEditor,
  },
  props: {
    toolbarsFlag: {
      type: Boolean,
      default: false,
    },
    subfield: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: "",
    },
    boxShadow: {
      type: Boolean,
      default: false,
    },
    editable: {
      type: Boolean,
      default: true,
    },
    defaultOpen: {
      type: String,
      default: "preview",
    },
    navigation: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        preview: true, // 预览
        fullscreen: false, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        subfield: true, // 单双栏模式
        htmlcode: false, // 展示html源码
        help: true, // 帮助
      },
    };
  },
  methods: {
    save(value, render) {
      this.$emit("save", value, render);
    },
  },
};
</script>
<style scoped>
.mavon {
  width: 100%;
  height: 100%;
}
</style>
